<template>
  <div>
    <van-button type="primary" block icon="">发布</van-button>
    <van-form @submit="onSubmit">
  
      <van-field
        v-model="title"
        label="标题"
        placeholder="标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />
      <van-field
        :value="cate_name"
        label="分类"
        placeholder="请选择分类"
        readonly
        name="cate_name"
        @click="catePickerShow = true"
      />
      <van-field
        v-model="content"
        name="content"
        label="内容"
        type="textarea"
        :rules="[{ required: true, message: '请输入内容' }]"
        placeholder="请输入内容"
      />
      <van-field label="图片" name="fileLite" label-width="45px">
        <template #input>
          <van-uploader v-model="fileList" multiple :max-count="3" />
          <!-- :max-size="500 + 1024" :after-read="afterRead" -->
        </template>
      </van-field>
      <div class="que">
        <van-button size="large" round block type="info" native-type="submit" 
          >确定</van-button>
      </div>
    </van-form>
    <van-popup
      v-model="catePickerShow"
      position="bottom"
      :style="{ height:'50%',width:'100%' }"
    >
      <van-picker
        title="请选择"
        show-toolbar
        :columns="cate"
        @confirm="onConfirm"
        @cancel="catePickerShow = false"
        value-key="name"
      />
    </van-popup>

    <van-tabbar v-model="active" active-color="#07c160">
      <van-tabbar-item icon="home-o" to="/#">首页</van-tabbar-item>
      <van-tabbar-item icon="add-o" to="/publish">发布</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>

// import tab from "../components/tab.vue";

import { Field, Form, Uploader, Popup, Picker,Tabbar,TabbarItem } from "vant";

console.log(Form),
 console.log(Field), 
 console.log(Tabbar),
 console.log(TabbarItem),
 console.log(Uploader);
import { mapActions, mapState } from "vuex";

import { addArticle } from "../api/api";

export default {
  name: "publish",
  data() {
    return {
      active: 0,
      title: "",
      content: "",
      cate_id: "",
      cate_name: "",
      catePickerShow: false,
       fileList: [],
    };
  },
  computed: {
    ...mapState(["cate", "uid", "userInfo"]),
  },
  created() {
    this.$store.dispatch("getCate");
  },
  methods: {
     ...mapActions(['upload']),
    onConfirm(e) {
      console.log(e);
      this.catePickerShow = false;
      this.cate_name = e.name;
      this.cate_id = e._id;
    },
   
    async onSubmit(values) {
      console.log(values)
       let { cate_id, uid, userInfo, fileList } = this;
      let { nickname } = userInfo;


      if (!uid) {
        this.$toast("请先登录");
        setTimeout((v) => {
          this.$router.push("/login");
        }, 500);
        return;
      }




       let imageSrc = await this.upload(fileList);
      
      console.log(imageSrc);
      delete values.fileList;
      addArticle({
        title:this.title,
        content:this.content,  
        cate_name:this.cate_name,
        cate_id:this.cate_id,
        author:nickname,
        author_id:uid,
        imageSrc
      }).then(res=>{
        console.log(res)
        if(res.code == 0) {
          this.$toast(res.msg);
        }
        else {
          this.$toast(res.msg)
        }
      })
    },
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Tabbar.name]:Tabbar,
    [TabbarItem.name]:TabbarItem
  },
};
</script>
<style>
.que {
  text-align: center;
  margin: 30px 50px;
}
</style>